<template>
	<view class="container">
		<u-sticky>
			<view class="searchbox">
				<u-search v-model="keyword" shape="square" :showAction="false" placeholder="输入合伙人姓名/电话" @search="searchHandle"></u-search>
			</view>
		</u-sticky>
		<block v-if="list.length">
			<view class="list">
				<view v-for="(item, index) in list" :key="index" class="list-item">
					<view class="head">
						<view class="left">
							<view class="avatar">
								<image :src="item.avatar"></image>
							</view>
							<view class="userInfo">
								<view class="name">{{ item.name }}</view>
								<view class="mobile">{{ item.mobile }}</view>
							</view>
						</view>
						<view class="right">
							<view :class="['status', { yellow: [3].includes(item.status), red: [4, 5].includes(item.status) }]">{{ item.status_text }}</view>
							<view class="shopname">{{ item.shopname }}</view>
						</view>
					</view>
					<view class="msg">邀请时间：{{ get_dates(item.createtime) }}</view>
					<view class="msg" v-if="[3,4].includes(item.status)">审核时间：{{ get_dates(item.audit_time) }}</view>
				</view>
			</view>
		</block>
		<view class="empty" v-else>暂无数据</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			list: [],
			page: 1,
			totalPage: 1
		};
	},
	onLoad(option) {
		this.getList();
	},
	onReachBottom() {
		this.page++;
		if (this.page > this.totalPage) return this.$wanlshop.msg('我也是有底线的');
		this.getList();
	},
	methods: {
		//搜索
		searchHandle() {
			this.page = 1;
			this.totalPage = 1;
			this.list = [];
			this.getList();
		},
		getList() {
			uni.showLoading({
				title: '数据请求中···'
			});
			this.$request({
				url: 'Partners/shop_partner_invite_log',
				method: 'POST',
				data: {
					keyword: this.keyword,
					type: 1,
					page: this.page
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					this.list = [...this.list, ...data.data];
					this.totalPage = data.last_page;
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
				uni.hideLoading();
			});
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	.searchbox {
		width: 100%;
		padding: 36rpx 32rpx 16rpx;
		background-color: #fff;
		box-sizing: border-box;
	}
	.empty {
		padding-top: 80rpx;
		text-align: center;
		color: #666;
		font-size: 28rpx;
	}
	.list {
		padding: 0 32rpx;
		&-item {
			padding: 24rpx 0;
			border-bottom: 2rpx solid #efefef;
		}
		.head {
			display: flex;
			justify-content: space-between;
			.left {
				display: flex;
				align-items: center;
			}
			.avatar {
				width: 84rpx;
				height: 84rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.userInfo {
				padding-left: 20rpx;
				.name {
					padding-bottom: 8rpx;
					line-height: 42rpx;
					font-size: 30rpx;
					color: #333;
				}
				.mobile {
					line-height: 34rpx;
					font-size: 24rpx;
					color: #666;
				}
			}
			.right {
				text-align: right;
			}
			.status {
				padding: 4rpx 0 12rpx;
				line-height: 36rpx;
				font-size: 26rpx;
				color: #999;
			}
			.yellow {
				color: #ebbe87;
			}
			.red {
				color: #ff3f4a;
			}
			.shopname {
				line-height: 34rpx;
				font-size: 24rpx;
				color: #333;
			}
		}
		.msg {
			display: flex;
			justify-content: space-between;
			margin-top: 8rpx;
			line-height: 36rpx;
			font-size: 24rpx;
			color: #888;
		}
	}
}
</style>
